<template>
  <div class="upfiler">
    <form class="uptikes">
      <input v-if="showFows" id="file" ref="files" :webkitdirectory="webkitdirectory===1?true:false" type="file" name="input" :disabled="!!filseList.length" :multiple="multiple" class="inputer" @change="getFiler">
      <slot />
      <div class="upList">
        <div v-for="(item, index) in filseList" :key="index" class="uplistcontent" v-loading="!item.status" :element-loading-text="item.statusname">
          <!-- <div class="upconter" :style="{width: `${item.filstePros}%`, background:item.bgcolor}" /> -->
          <i class="el-icon-circle-close rightclears" @click="clearBox(item, index)" />
          <video v-if="item.src" class="iconsge">
            <source :src="item.src" :type="item.typename">
            您的浏览器不支持 HTML5 video 标签。
          </video>
          <div class="nums">
            <div class="names">{{ item.name }}</div>
            <div class="stausneg">{{ item.statusname }}</div>
          </div>
        </div>
      </div>
    </form>

  </div>
</template>
<script>

// import MediaInfo from 'mediainfo.js'

export default {
  props: {
    webkitdirectory: { // 是否文件夹
      type: Boolean,
      default: true
    },
    multiple: { // 是否多选
      type: Boolean,
      default: true
    },
    typelist: {
      type: Array,
      default: () => ['video']
    }
  },
  data () {
    return {
      filseList: [],
      video_type: ['MP4', 'MPEG', '3GP', 'AVI', 'mp4', 'mpeg', '3gp', 'avi'],
      showFows: true
    }
  },
  methods: {
    resetBox () {
      this.showFows = false
      this.filseList = []
      setTimeout(_ => {
        this.showFows = true
      }, 100)
    },
    getFiler (e) {
      console.log('eeee', e)
      this.resetBox()

      this.$refs.files.files.forEach(async (res, index) => {
        let src = ''
        if (index <= 20) {
          const windowURL = window.URL || window.webkitURL
          // window.URL.createObjectURL 会根据传入的参数创建一个指向该参数对象的URL
          src = windowURL.createObjectURL(res)
        }
        const types = res.type.split('/')
        if (this.typelist.includes(types[0])) {
          let statusname = '等待上传'
          let status = true
          let filstePros = 0
          let bgcolor = ''
          if (!this.video_type.includes(types[1])) {
            statusname = '格式错误'
            status = false
            filstePros = 100
            bgcolor = 'red'
          }
          this.filseList.push({
            src,
            raw: res,
            typename: res.type,
            type: res.type.split('/')[0],
            name: res.name,
            size: res.size,
            statusname,
            status,
            filstePros,
            bgcolor
          })
        }
      })
      this.$forceUpdate()
      this.$emit('changeFun', this.filseList)
      // 返回数据
    },
    clearBox (item, index) {
      this.filseList.splice(index, 1)
      this.$emit('deleteFun', this.filseList, item)
      // 返回数据
    }
  },
  watch: {
    webkitdirectory () {
      console.log('webkitdirectory', this.webkitdirectory)
    }
  }
}
</script>

